<!DOCTYPE html>
<html  lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>时间线</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" th:href="@{/css/pure/pure-min.css}" />
<script th:src="@{/js/datapicker/WdatePicker.js}" type="text/javascript"></script>
<script th:src="@{/js/jquery/jquery.min.js}" type="text/javascript"></script>
</head>
<body>
	 <form class="pure-form pure-form-aligned" th:action="@{/api/timeLine/save}" method="post">
		<fieldset>
			<input type="hidden" name="id" />
			<div class="pure-control-group">
				<label for="lineName">列车线路：</label>
				<select id="lines" name="line">
					<option value="">--请选择列车线路--</option>
					<option th:each="line:${lineList}" th:value="${line.lineId}" th:text="${line.lineName}"></option>
				</select>
			</div>
			<div class="pure-control-group">
				<label for="stageName">站点：</label>
				<!-- <input id="stageName" type="text" name="stageName" placeholder="站点" /><br /> -->
				<select id="stations" name="stageName">
					<option value="">---请选择站点---</option>
				</select>				
			</div>
			<div class="pure-control-group">
				<label for="start_arrival">出发/到达</label>
				<select id="start_arrival" name="direction">
					<option value="1">出发</option>
					<option value="2">候车</option>
					<option value="3">到达</option>
				</select>
			</div>
			<div class="pure-control-group">
				<label for="start_date">时间：</label>
				<input id="start_date" type="text" name="startDate" placeholder="开始日期" onClick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'})" /><br />
			</div>
			<div class="pure-control-group">
				<label for="remark">备注：</label>
				<textarea id="remark" name="remark" placeholder="备注"></textarea>
			</div>
			<div class="pure-controls">
				<button type="submit" class="pure-button pure-button-primary">Submit</button>
			</div>
		</fieldset>
	</form>
</body>
<script type="text/javascript">
	$(document).ready(function(){
		$('#lines').change(function(){
			var code = $('#lines').val();
			if(code == ''){
				return;
			}
			$.ajax({
				url:'/api/stages/' + code,
				type:'GET',
				success:function(msg){
					var station = $('#stations').empty();
					for(var i in msg){
						station.append('<option value="' + msg[i].stageKey + '">' + msg[i].stageName + '</option>');
					}
				}
			});
		});
	});
</script>
</html>